<template>
<div class="main-wrap" style="height: 100vh">
            <div>
                <div>
                    <ul  class="goodsType">
                        <li class="goodsTypes types" @click="typeChioce(1)">综合</li>
                        <li class="goodsTypes types" @click="typeChioce(2)">人气</li>
                        <li class="goodsTypes types" @click="typeChioce(3)">价格
                            <i></i>
                        </li>
                        <li class="goodsTypes types" @click="typeChioce(5)">推荐指数</li>
                    </ul>
                    <pull-to
        :bottom-load-method="infiniteHandler"
        :bottom-config="BOTTOM_DEFAULT_CONFIG" style="height:100vh;padding-top: 50px">
                    <ul class="goodsList" v-if="goodList.length>0">
                        <li class="goods" v-for="(item,index) in goodList" :key="index">
                          <router-link :to="'/detail?type=1&limit_id=0&group_id=0&join_id=0&goods_id='+item.goods_id">
                            <div class="pic">
                                <img :src="item.image" alt="">
                            </div>
                            <div class="msg">
                                <p class="title" v-html="item.goods_name"></p>
                                <!-- <span class="headIcon"><img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=622574265,1369534815&fm=58&bpow=800&bpoh=500" alt=""></span> -->
                                <span class="goodsPrice">￥{{item.sell_price}}</span>
                                <span class="popular"><img src="@/assets/img/fire.png"><span>{{item.popularity}}</span></span>
                            </div>
                          </router-link>
                        </li>
                    </ul>
                    
                    <div v-else class="foundNot">
                        <div v-if="loading">
                            <img src="@/assets/img/notFound.png" alt="">
                            <p>搜索不到“{{searchContent}}”</p>
                        </div>
                    </div>
                    </pull-to>
                </div>


            </div>
</div>
</template>

<script>

    import request from "@/request/index.js"
    import PullTo from 'vue-pull-to';
    export default {
        name: "allGoods",
        components: {
            PullTo,
        },
        data() {
            return {
                active:0,
                active1:0,
                page:1,
                searchContent:'',
                list:1,
                type:1,
                data:{},
                goodList:[],
                loading:false,
                allPage:0,
                category_id:'',
                BOTTOM_DEFAULT_CONFIG: {
                    pullText: "上滑继续加载",
                    triggerText: "释放更新",
                    loadingText: "加载中,请稍后",
                    doneText: "内容已全部展示了",
                    failText: "加载失败",
                    loadedStayTime: 1000,
                    stayDistance: 50,
                    triggerDistance: 50,
                },
            }
        },
        watch:{
            type(newVal,oldVal){
                this.goodList=[];
                this.$router.push({
                    path:'/allGoods?type='+this.type,
                })
                request.allGoods(this);
            },
            '$route'(to, from) {   
                this.$router.go(0);   
            }
        },
        methods:{
            infiniteHandler:function(loaded){
                this.page++;

                if(this.page<this.allPage){
                    this.BOTTOM_DEFAULT_CONFIG.doneText = this.BOTTOM_DEFAULT_CONFIG.pullText;
                    loaded("done");
                    request.allGoods(this);
                }else{
                    this.BOTTOM_DEFAULT_CONFIG.doneText = "内容已全部展示";
                    loaded("done");
                    request.allGoods(this);
                }
            },
            typeChioce(type){
                var types=document.getElementsByClassName('types');
                for(var i=0;i<types.length;i++){
                    types[i].style.color="rgba(0,0,0,.87)";
                }
                if(this.type==5){
                    types[this.type-2].style.color="#FF4C50";
                }else{
                    types[this.type-1].style.color="#FF4C50";
                }

                if(this.type==3&&type==3){
                    this.type=4;
                }else{
                    this.type=type;
                }

            }
        },
        mounted() {
            document.title="全部商品";
            if(this.$route.query.type){
                this.type=this.$route.query.type;
            } 
            this.category_id=this.$route.query.category_id;
            request.allGoods(this);
            var types=document.getElementsByClassName('types');
            for(var i=0;i<types.length;i++){
                types[i].style.color="rgba(0,0,0,.87)";
            }
            if(this.type==5){
                types[this.type-2].style.color="#FF4C50";
            }else if(this.type==3||this.type==4){
                types[2].style.color="#FF4C50";
            }else{
                types[this.type-1].style.color="#FF4C50";
            }
        },
    }
</script>

<style scoped lang="scss">
.foundNot{
    text-align: center;
    padding-top: 90px;
    img{
        width: 120px;
        margin-bottom: 20px;
    }
}
    .noteType{
        display: flex;
        justify-content: space-between;
        padding: 0 4vw;
        margin: 10px 0;
        .noteTypes:first-child{
            color: #FF4C50;

        }
        ul{
            display: flex;
            justify-content: space-between;
            width: 60px;
            font-size:12px;
        }
        span{
            font-size: 12px;
        }
    }
    .goodsType{
        display: flex;
        justify-content: space-around;
        font-size:12px;
        width: 100%;
        flex-wrap: wrap;
        padding: 0 4vw;
        margin: 10px 0;
        height: 50px;
        position: absolute;
        top: 0;
        z-index: 2;
        .goodsTypes:first-child{
            color:#FF4C50;
        }
    }
    .van-tabs__content{
        margin-top: 10px !important;
    }
    .noteList{
        display:flex;
        justify-content: space-between;
        padding: 4vw 4vw;
        flex-wrap: wrap;
        background: #f5f5f5;
        .notes{
            width:44vw;
            border-radius: 8px;
            background:#ffffff;
            .pic{
                height: 44vw;
                width: 44vw;
                line-height: 44vw;
                overflow: hidden;
                img{
                    width: 100%;

                }
            }
            .headIcon{
                width:25px;
                height: 25px;
                overflow: hidden;
                border-radius: 50%;
                margin-right: 5px;
                display: inline-block;
                vertical-align: middle;
                img{
                    width: 100%;

                }
            }
            .msg{
                padding:8px 12px;

            }
            .userName{
                vertical-align: middle;
                font-size:13px;
                color:#333333;
            }
            .title{
                width: 100%;
                height: 45px;
                font-size: 13px;
                color: #333333;
                line-height: 22px;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                -webkit-box-orient: vertical;
                // padding: 0 12px;
            }
            .popular{
                float:right;
                img{
                    width:16px;
                    vertical-align: middle;
                    margin-right: 5px;
                }
                span{
                    font-size: 12px;
                    vertical-align: middle;
                }
            }
        }
    }
    .goodsList{
        display:flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 4vw 4vw;
        background: #f5f5f5;
        .goods{
            width:44vw;
            border-radius: 8px;
            background:#ffffff;
            margin-bottom: 15px;
            .pic{
                height: 44vw;
                width: 44vw;
                line-height: 44vw;
                img{
                    width: 100%;
                  height: 100%;
                }
            }
            .headIcon{
                width:25px;
                height: 25px;
                overflow: hidden;
                border-radius: 50%;
                margin-right: 5px;
                display: inline-block;
                vertical-align: middle;
                img{
                    width: 100%;

                }
            }
            .msg{
                padding:8px 12px;

            }
            .goodsPrice{
                vertical-align: middle;
                font-size:14px;
                color:#FF4C50;
            }
            .title{
                width: 100%;
                height: 45px;
                font-size: 13px;
                color: #333333;
                line-height: 22px;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                -webkit-box-orient: vertical;
                // padding: 0 12px;
            }
            .popular{
                float:right;
                img{
                    width:13px;
                    vertical-align: middle;
                    margin-right: 2px;
                }
                span{
                    font-size: 12px;
                    vertical-align: middle;
                }
            }
        }
    }
    .userList{
        padding: 12px 4vw;
        background: #f5f5f5;
        li{
            border-radius: 8px;
            background:#ffffff;
            padding:12px 22px 12px 12px;
        }
        .headIcon{
            width: 40px;
            height: 40px;
            border-radius: 50%;
            overflow: hidden;
            display: inline-block;
            vertical-align: middle;
            img{
                width: 100%;
            }

        }
        .userName{
            font-size: 14px;
        }
        .userId{
            color:#666666;
            font-size: 12px;
        }
        .contentBtn{
            height: 24px;
            width: 60px;
            text-align: center;
            line-height: 24px;
            background: #FF4C50;
            color: #ffffff;
            border-radius: 50px;
            vertical-align: middle;
        }
        .contentBtn1{
            height: 24px;
            width: 60px;
            text-align: center;
            line-height: 24px;
            background: #CCCCCC;
            color: #ffffff;
            border-radius: 50px;
            vertical-align: middle;
        }
        .note{
            line-height: 2em;
            color: #333333;
        }
    }

</style>
